<template>
    <div translate="no" class="body">
        <div class="content">
            <div class="main-text">
                <h1>天啊 404<br>页面失踪了</h1>
                <div class="main-text-a"><a href="#">返回首页</a></div>
            </div>
        </div>
    </div>
</template>

<script>
    import Vue from 'vue'

    export default {
        data() {
            return {}
        },
        mounted() {
//            (function () {
//                function ready(fn) {
//                    if (document.readyState != 'loading') {       //页面加载中执行
//                        fn();
//                    } else {
//                        document.addEventListener('DOMContentLoaded', fn);
//                    }
//                }
//                function makeSnow(el) {
//                    var ctx = el.getContext('2d');
//                    var width = 0;
//                    var height = 0;
//                    var particles = [];
//
//                    var Particle = function () {
//                        this.x = this.y = this.dx = this.dy = 0;
//                        this.reset();
//                    }
//
//                    Particle.prototype.reset = function () {
//                        this.y = Math.random() * height;
//                        this.x = Math.random() * width;
//                        this.dx = (Math.random() * 1) - 0.5;
//                        this.dy = (Math.random() * 0.5) + 0.5;
//                    }
//
//                    function createParticles(count) {
//                        if (count != particles.length) {
//                            particles = [];
//                            for (var i = 0; i < count; i++) {
//                                particles.push(new Particle());
//                            }
//                        }
//                    }
//
//                    function onResize() {
//                        width = window.innerWidth;
//                        height = window.innerHeight;
//                        el.width = width;
//                        el.height = height;
//
//                        createParticles((width * height) / 10000);
//                    }
//
//                    function updateParticles() {
//                        ctx.clearRect(0, 0, width, height);
//                        ctx.fillStyle = '#f6f9fa';
//
//                        particles.forEach(function (particle) {
//                            particle.y += particle.dy;
//                            particle.x += particle.dx;
//
//                            if (particle.y > height) {
//                                particle.y = 0;
//                            }
//
//                            if (particle.x > width) {
//                                particle.reset();
//                                particle.y = 0;
//                            }
//
//                            ctx.beginPath();
//                            ctx.arc(particle.x, particle.y, 5, 0, Math.PI * 2, false);
//                            ctx.fill();
//                        });
//
//                        window.requestAnimationFrame(updateParticles);
//                    }
//
//                    onResize();
//                    updateParticles();
//                }
//
//                ready(function () {var canvas = document.getElementById('snow');makeSnow(canvas);});
//            })();
        }
    }

</script>


<style>
    .body {
        height: 637px;
        min-height: 637px;
        font-size: 32px;
        font-weight: 500;
        color: #5d7399;
        margin: 0;
        padding: 0;
        border: 0;
    }
    .content {
        height: 100%;
        position: relative;
        z-index: 1;
        background-color: #d2e1ec;
        background-image: -webkit-linear-gradient(top, #bbcfe1 0%, #e8f2f6 80%);
        background-image: linear-gradient(to bottom, #bbcfe1 0%, #e8f2f6 80%);
        overflow: hidden;
    }
    .main-text {
        padding: 20vh 20px 0 20px;
        text-align: center;
        line-height: 2em;
        font-size: 5vh;
    }
    .main-text h1 {
        font-size: 45px;
        line-height: 48px;
        margin: 0;
        padding: 0;
    }
    .main-text-a {
        height: 32px;
        margin-left: auto;
        margin-right: auto;
        text-align: center;
    }
    .main-text-a a {
        font-size: 16px;
        text-decoration: none;
        color: #5d7399;
    }
    .main-text-a a:hover {
        color: #333;
    }
</style>
